<template>
  <div class="login">
    <div class="login_box">
      <div class="login_title">欢迎登录</div>
      <div class="login-content-main-sacn" @click="isScan = !isScan">
        <i>
          <svg
            v-if="isScan"
            xmlns="http://www.w3.org/2000/svg"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
          >
            <path
              fill="#ffffff"
              d="M672.97393 864.932486H545.375065v-57.318336c0-17.41459-14.117504-31.532094-31.560747-31.532094-17.40845 0-31.526978 14.118527-31.526977 31.532094v57.318336H354.696662c-17.437103 0-31.533117 14.118527-31.533117 31.533117s14.096015 31.533117 31.533117 31.533118h318.277268c17.415613 0 31.532094-14.118527 31.532094-31.533118s-14.117504-31.533117-31.532094-31.533117zM953.955854 96.000256H70.050286c-34.837367 0-63.073398 28.250358-63.073398 63.060095v512.387832c0 34.830203 28.236031 63.067258 63.073398 63.067258h883.905568c34.830203 0 63.067258-28.237055 63.067258-63.067258V159.060351c0-34.808714-28.237055-63.060095-63.067258-63.060095zM70.050286 671.449207v-45.481777h606.840852c11.610409 0 21.022761-9.425655 21.022761-21.02276 0-11.610409-9.412352-21.021737-21.022761-21.021738H70.050286V159.060351h883.905568v424.861558H804.913651c-11.611432 0-21.022761 9.411328-21.022761 21.021737 0 11.597106 9.411328 21.022761 21.022761 21.022761h149.042203v45.481776H70.050286z"
            />
          </svg>
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            class="icon"
            width="64px"
            height="64.00px"
            viewBox="0 0 1024 1024"
            version="1.1"
          >
            <path
              fill="#ffffff"
              d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8zM192 192l134.4 0 0 134.4-134.4 0 0-134.4ZM377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2zM192 668.8l131.2 0 0 131.2-131.2 0 0-131.2ZM633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6zM700.8 192l134.4 0 0 134.4-134.4 0 0-134.4ZM572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8zM886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2zM582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944zM944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z"
            />
          </svg>
        </i>
        <div class="login-content-main-sacn-delta"></div>
      </div>
      <div class="login-content" v-if="!isScan">
        <div class="login_item">
          <label class="lable">手机号：</label>
          <el-input
            class="login_item_input"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </div>
        <div class="login_item">
          <label class="lable">密码：</label>
          <el-input
            class="login_item_input"
            v-model="loginForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </div>
        <div class="login_item_Err" v-if="isInputNaN">
          手机号或密码有误，请输入正确的手机号或密码！
        </div>
        <div class="login_btnBox">
          <el-button
            class="login_btn"
            type="primary"
            round
            @click="submitForm"
            @keyup.enter.native="submitForm"
            >登录</el-button
          >
        </div>
      </div>

      <QrScan v-if="isScan" />
    </div>
  </div>
</template>

<script>
import QrScan from "./qrScan.vue";
export default {
  name: "Login",
  components: { QrScan },
  data() {
    return {
      //   输入框是否为空
      isInputNaN: false,
      loginForm: {
        phone: "",
        password: "",
      },
      // 是否是二维码
      isScan: false,
    };
  },
  mounted() {},
  methods: {
   
    submitForm() {
      this.isInputNaN = false;

      //手机号验证
      let reg_tel = /^1[3-9]\d{9}$/;
      if (reg_tel.test(this.loginForm.phone)) {
        const loading = this.$loading({
          background: "rgba(0,0,0,0.6)",
          text: "正在加载中...",
          spinner: "el-icon-loading",
        });
        this.$store
          .dispatch("user/login", this.loginForm)
          .then(() => {
            // setTimeout(() => {
            this.$router.push({ name: "PersonInfo" });
            // }, 300);
            // this.loading = false;
            loading.close();
          })
          .catch(() => {
            // this.loading = false;
            loading.close();
          });
      } else {
        this.isInputNaN = true;
        return;
      }
    },
  },
  // watch: {
  //   isScan: function (newVal) {
  //     this.initQrcode();
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  min-width: 700px;
  height: 100%;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  box-sizing: border-box;
}
.login-scan-animation {
  opacity: 0;
  animation-name: error-num;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.login_box {
  width: 700px;
  min-width: 700px;
  min-height: 500px;
  // background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: calc(50% - 300px);
  // left: 50%;
  left: calc(50% - 350px);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.7);

  .login-content {
    width: 100%;
    height: 100%;
    .login_item {
      width: 100%;
      padding: 0 50px;
      margin-top: 40px;
      display: flex;
      box-sizing: border-box;

      .lable {
        width: 120px;
        padding: 10px 10px;
        font-size: 24px;
        font-weight: bold;
      }
      .login_item_input {
        width: 100%;

        ::v-deep .el-input__inner {
          height: 50px;
          border-radius: 20px;
          border: 1px solid rgba(0, 0, 0, 0.3);
          color: rgba(255, 255, 255, 0.7);
          font-size: 18px;
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
  }
  .login-content-main-sacn {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    transition: all ease 0.3s;
    color: #ffffff;
    &-delta {
      position: absolute;
      width: 35px;
      height: 70px;
      z-index: 2;
      top: 2px;
      right: 21px;
      // background: #ffffff;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.2)
      );
      transform: rotate(-45deg);
    }
    &:hover {
      opacity: 1;
      transition: all ease 0.3s;
      color: #ffffff !important;
    }
    i {
      width: 47px;
      height: 50px;
      display: inline-block;
      font-size: 48px;
      position: absolute;
      right: 1px;
      top: 0px;
    }
  }
  .login_title {
    font-size: 56px;
    font-weight: bold;
  }

  .login_item_Err {
    position: absolute;
    padding: 0 50px;
    margin-top: 20px;
    font-size: 18px;
    text-align: left;
    color: red;
  }
  .login_btnBox {
    width: 100%;
    margin-top: 80px;

    .login_btn {
      width: 30%;
      height: 50px;
      font-size: 26px;
      font-weight: bold;
    }
  }
}
</style>
